<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Event Booking</title>
        <style>
            .ui-layout-unit-center .ui-layout-bd {
                border: 0;
            }
            .ui-layout-unit-left .ui-layout-bd {
                border: 0;
            }
        </style>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="top" height="75" resizable="false" closable="false" collapsible="false">
                <h:panelGrid  style="background: goldenrod; width: 100%; height: 80px">
                    <h:outputText value="name: #{userPerformanceMB.searchEventName}, venue: #{userPerformanceMB.searchVenueName}, date: #{userPerformanceMB.convertDate()}, genre: #{userPerformanceMB.convertGenre()}, type: #{userPerformanceMB.convertType()}"/>
                </h:panelGrid>
            </p:layoutUnit>
            <p:layoutUnit position="left" width="300" resizable="false" closable="false" collapsible="false">
                <h:form>
                    <h:panelGrid id="searchEventCriteria" style="background: goldenrod">
                        <h3><font color = "Apricot">Search Event</font></h3>
                        <hr/>
                        Name:
                        <p:inputText value="#{userPerformanceMB.searchEventName}"/>
                        Venue:
                        <h:selectOneMenu style="width: 260px" value="#{userPerformanceMB.searchVenueName}">
                            <f:selectItem itemLabel="Select One..." itemValue= ""/>
                            <f:selectItems value="#{userPerformanceMB.getAllActiveVenues()}"></f:selectItems>
                        </h:selectOneMenu>
                        Genre:
                        <h:selectOneMenu style="width: 260px" value="#{userPerformanceMB.searchGenre}">
                                <f:selectItem itemLabel="Select One..." itemValue= ""/>
                                <f:selectItem itemLabel="Concert" itemValue="Concert"/>
                                <f:selectItem itemLabel="Dance" itemValue="Dance"/>
                                <f:selectItem itemLabel="Musical" itemValue="Musical"/>
                                <f:selectItem itemLabel="Theatre" itemValue="Theatre"/>
                                <f:selectItem itemLabel="Others" itemValue="Others"/>
                        </h:selectOneMenu>
                        Type:
                        <h:selectOneMenu style="width: 260px" value="#{userPerformanceMB.searchType}">
                                <f:selectItem itemLabel="Select One..." itemValue= ""/>
                                <f:selectItem itemLabel="Comedy" itemValue="Comedy"/>
                                <f:selectItem itemLabel="Horror" itemValue="Horror"/>
                                <f:selectItem itemLabel="Thriller" itemValue="Thriller"/>
                                <f:selectItem itemLabel="Family" itemValue="Family"/>
                                <f:selectItem itemLabel="Drama" itemValue="Drama"/>
                                <f:selectItem itemLabel="Rock" itemValue="Rock"/>
                                <f:selectItem itemLabel="Pop" itemValue="Pop"/>
                                <f:selectItem itemLabel="Rhythms and Blues" itemValue="Rhythms and Blues"/>
                                <f:selectItem itemLabel="Others" itemValue="Others"/>
                        </h:selectOneMenu>
                        Date:  
                        <p:calendar value="#{userPerformanceMB.findDate}" mindate="#{userPerformanceMB.findingMinDate()}" maxdate="#{userPerformanceMB.findingMaxDate()}" pattern="dd/MM/yyyy"/>
                        <hr/>
                        <p:commandButton value="Search" action="searchevents.xhtml?faces-redirect=true" />
                    </h:panelGrid>
                </h:form>
            </p:layoutUnit>
            <p:layoutUnit position="center" scrollable="true">
                <h:form>
                    <p:tabView style="background: goldenrod">
                        <p:tab title = "Now Showing" id="nowShowing">
                            <h2>#{userPerformanceMB.searchAvailableShowResults()}</h2>
                            <p:dataGrid var="events" value="#{userPerformanceMB.searchAvailableShows()}" rows="5" paginator="true" columns="1" style="width: 100%">
                                <h:column>
                                    <p:panel id="currentpnl" header="#{events.eventName}" style="background: gold">        
                                        <h:panelGrid columns="2" style="width:100%">
                                            <h:column>
                                                <p:graphicImage  value="#{events.poster}" width="75" height="100"/>
                                                <p:commandLink action="selectshow?faces-redirect=true">
                                                    <p:graphicImage value="picture/info.gif" width="75" height="20" style="vertical-align: text-bottom; text-align: left"/>
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoEvent}" value="#{events.eventName}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoPoster}" value="#{events.poster}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoDescription}" value="#{events.description}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoId}" value="#{events.id}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoLanguage}" value="#{events.language}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoStartDate}" value="#{events.startDate}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoEndDate}" value="#{events.endDate}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoDuration}" value="#{events.duration}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoType}" value="#{events.type}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoGenre}" value="#{events.genre}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoRating}" value="#{events.rating}" />
                                                </p:commandLink>
                                            </h:column>
                                            <h:column>
                                                <h:outputText style="font-size: 12px; vertical-align: text-top; text-align: left" value="#{events.description}"/><br/>
                                            </h:column>
                                        </h:panelGrid>
                                    </p:panel>
                                </h:column>
                            </p:dataGrid>
                        </p:tab>
                        <p:tab title = "Coming Soon" id="comingSoon">
                            <h2>#{userPerformanceMB.searchComingSoonResults()}</h2>
                            <p:dataGrid var="events" value="#{userPerformanceMB.searchComingSoon()}" rows="5" paginator="true" columns="1" style="width: 100%">
                                <h:column>
                                    <p:panel id="comingpnl" header="#{events.eventName}" style="background: gold">
                                        <h:panelGrid columns="2" style="width:100%">
                                            <h:column>
                                                <p:graphicImage  value="#{events.poster}" width="75" height="100"/>
                                                <p:commandLink action="selectshow?faces-redirect=true">
                                                    <p:graphicImage value="picture/info.gif" width="75" height="20" style="vertical-align: text-bottom; text-align: left"/>
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoEvent}" value="#{events.eventName}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoPoster}" value="#{events.poster}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoDescription}" value="#{events.description}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoId}" value="#{events.id}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoLanguage}" value="#{events.language}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoStartDate}" value="#{events.startDate}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoEndDate}" value="#{events.endDate}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoDuration}" value="#{events.duration}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoGenre}" value="#{events.genre}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoType}" value="#{events.type}" />
                                                    <f:setPropertyActionListener target="#{userPerformanceMB.infoRating}" value="#{events.rating}" />
                                                </p:commandLink>
                                            </h:column>
                                            <h:column>
                                                <h:outputText style="font-size: 12px; vertical-align: text-top; text-align: left" value="#{events.description}"/><br/>
                                            </h:column>
                                        </h:panelGrid>
                                    </p:panel>
                                </h:column>
                            </p:dataGrid>
                        </p:tab>
                    </p:tabView>
                </h:form>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

